超初心者向け商品紹介テンプレート２

超初心者アフィリエイター向けテンプレート２・商品紹介テーブル／横２列x縦２段

商品紹介テーブル／横２列x縦２段

簡単な商品紹介テーブルを作りました。ただのテーブルですが、楽天のテンプレートは複雑で管理しにくいので、よりシンプルなものを自分用に作りました。貼付ける場所を迷わないようにコメント行を加えました。

今回は、ちょっと枠線をつけてみました。本来なら、CSS で書いた方がいいのでしょうが、楽天ユーザー向けにすぐにペーストして使えるテーブルタグを使ったものにしました。初心者の方でも、分かりやすい１商品１行のタイプです（と書いている初心者も楽天を始めた２カ月弱前までは、ウェブデザインソフト一辺倒の HTML の素人ですが）。

商品紹介テーブル／横２列x縦２段

商品追加自由自在： と  とで挟まれた部分を  の後ろにコピー＆ペーストすれば、商品数を好きなだけ増やせます。
cell の背景色は、<td valign="top" bgcolor="#fffff0" width="120"> のように指定可能です。
画像の横幅は、１番目が 70 px まで、２番目が 120 px までです。

実際の表示例は、HTML コードの下にあります。

追記１：　自分で確認してみましたが、楽天の絵本の商品写真だと、120px はちょっと間が抜けて見えますね。 width="120" の部分を適当に変更してお試し下さい。なお、ココログでお使いになる場合には、商品内容紹介欄の横幅を小さくする必要があります。ココログの CSS を見ると、コンテンツエリアは以下のように設定されています。つまり、横幅は 400px 以下でないとだめです。　#center { 　　　　float: left; 　　　　width: 400px; 　}
追記２：　楽天の中央カラム用に１列目 70 px、２列目 300 px の例を掲載しました（楽天の提供するアフィリエイト画像は、調べた限りでは幅 64 px でした）。表全体の横幅も 400px 以下にしましたので、ココログでも使えるはずです。 valign="baseline" から valign="top" に変更しました。

<!-- ===== 商品紹介テーブル／横２列x縦２段 楽天センターカラム用 ===== -->
<!-- 商品の紹介文は、オレンジ色（#FFA500）70px:300px -->
<!-- コピー＆ペーストで商品の数は、増やせます --> 

<table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999">
<tr>
	<td>
	<table border="0" cellspacing="2" cellpadding="2">
		<!-- ---------- 商品１ ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="70">
		<!-- ↓商品１アフィリエイト用画像 -->
		▽商品１アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="300">
		<!-- ↓商品１アフィリエイト用テキストリンクのソース --> 
		▽商品１アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品１紹介文 -->
		▽商品１紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品１ ---------- -->

		<!-- ---------- 商品２ ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="70">
		<!-- ↓商品２アフィリエイト用画像 -->
		▽商品２アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="300">
		<!-- ↓商品２アフィリエイト用テキストリンクのソース -->
		▽商品２アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品２紹介文 -->
		▽商品２紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品２ ---------- -->
	</table>
	</td>
</tr>
</table>
<!-- ===== /商品紹介テーブル／横２列x縦２段 ===== -->


<!-- ===== 商品紹介テーブル／横２列x縦２段 ===== -->
<!-- 商品の紹介文は、オレンジ色（#FFA500）120px:400px -->
<!-- コピー＆ペーストで商品の数は、増やせます --> 

<table width="64" border="0" cellspacing="2" cellpadding="3" bgcolor="#009999">
<tr>
	<td>
	<table border="0" cellspacing="2" cellpadding="2">
		<!-- ---------- 商品１ ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="120">
		<!-- ↓商品１アフィリエイト用画像 -->
		▽商品１アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="400">
		<!-- ↓商品１アフィリエイト用テキストリンクのソース --> 
		▽商品１アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品１紹介文 -->
		▽商品１紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品１ ---------- -->

		<!-- ---------- 商品２ ---------- -->
		<tr>
		<td align="center" valign="center" bgcolor="white" width="120">
		<!-- ↓商品２アフィリエイト用画像 -->
		▽商品２アフィリエイト用画像△ 
		</td>
		<td valign="top" bgcolor="white" width="400">
		<!-- ↓商品２アフィリエイト用テキストリンクのソース -->
		▽商品２アフィリエイト用テキストリンクのソース△
		<p><font color="#ffa500">
		<!-- ↓商品２紹介文 -->
		▽商品２紹介文△ 
		</font></p>
		</td>
		</tr>
		<!-- ---------- /商品２ ---------- -->
	</table>
	</td>
</tr>
</table>
<!-- ===== /商品紹介テーブル／横２列x縦２段 ===== -->

おすすめおもちゃ（実際の表示例）

おすすめ絵本の紹介の場合

70px:300px　楽天広場センターカラム用

	100万回生きたねこ絵本ナビShop 絵本と絵本グッズの専門店！大人も子供も楽しめて癒されます！
	とけいのほん2 絵本ナビShop 絵本と絵本グッズの専門店！大人も子供も楽しめて癒されます！

120px:400px

	100万回生きたねこ絵本ナビShop 絵本と絵本グッズの専門店！大人も子供も楽しめて癒されます！
	とけいのほん2 絵本ナビShop 絵本と絵本グッズの専門店！大人も子供も楽しめて癒されます！